<template>
	<view class="">
		<view class="pr">
			<image src="/static/img/order/orderDbg2.png" class="w-max pa top0 left0 h-max"></image>
			<u-navbar :is-back="true" backIconColor="#fff" :border-bottom="false" is-fixed title-color="#fff"
				title="订单详情" :background="{background:'#fff0'}">
			</u-navbar>
			<view class="h260"></view>
		</view>
		<view class="flex-col col-center row-center color-fff h240 pr" style="margin-top: -300rpx;">
			<block v-if="data.status==1||(data.status==0&&data.type==0)">
				<block v-if="data.receive_countdown*1">
					<view class="" v-if="data.type==0&&data.order_receive&&data.order_receive.length">
						已有{{data.order_receive.length}}位师傅报价，请尽快选择一位师傅
					</view>
					<view class="fs32 fw-800" v-else>已通知陪诊师来{{data.type_text}}啦~</view>
					<view class="mt24">
						<text>距{{data.type_text}}结束还剩：</text>
						<u-count-down :timestamp="data.receive_countdown" font-size="30" color="#FFFBA1" separator="zh"
							separator-size="30" bg-color="transparent" :show-seconds="true" class=""
							separator-color="#FFFBA1" @end="getData()"></u-count-down>
					</view>
				</block>
				<block v-else>
					<view class="fs32 fw-800">{{data.type_text}}已结束</view>
					<view class="mt24">{{data.type_text}}已结束，{{data.type==0?'请您尽快选择一位师傅':'订单失效'}}</view>
				</block>
			</block>
			<block v-else-if="data.status==0">
				<view class="fs32 fw-800">订单待付款</view>
				<view class="mt24 flex">
					<text>请在</text>
					<u-count-down :timestamp="data.pay_countdown" font-size="30" color="#FFFBA1" separator="zh"
						separator-size="30" bg-color="transparent" :show-seconds="true" class=""
						separator-color="#FFFBA1" @end="getData()" />
					<text>内完成支付，超时订单自动取消</text>
				</view>
			</block>
			<block v-else-if="data.status==2">
				<view class="fs32 fw-800">{{data.status_text}}</view>
				<view class="mt24">雇佣成功,等待师傅为你服务</view>
			</block>
			<block v-else>
				<view class="fs32 fw-800">{{data.status_text}}</view>
			</block>
		</view>
		<view class="m20  pt10 pb20 radius20 bg-fff pr" v-if="!data.receive_id">
			<u-tabs :list="tablist" :is-scroll="false" :current="current" @change="e=>current=e" bg-color="transparent"
				:active-color="$zs" inactive-color="#999999" />
		</view>
		<view class="p20 pr " v-if="tablist[current].id==0">
			<block v-if="data.status==1||(data.status==0&&data.type==0)">
				<view v-for="(item,index) in data.order_receive" :key="index" class="bg-fff radius20 mb20 p20">
					<view class="bg-f8f px20 py10 radius12 flex">
						<view class="color-666 ml20">{{item.organ_id?'陪诊机构':'陪诊师'}}报价：</view>
						<view class="flex1 color-fs">￥{{item.offer_price}}</view>
						<view class="color-999 fs28 ">{{item.add_time}}</view>
					</view>
					<view class="p26 flex">
						<image :src="item.avatar" class="h92 w92 radius" mode="aspectFill"></image>
						<view class="pl24">
							<view class="fs28 color-232323 fw-700">{{item.name}}</view>
							<types :list="item.types" />
						</view>
					</view>
					<block v-if="!item.organ_id">
						<view class="fs26 mt20 pl46 flex ">
							<view class="w50p">
								<text class="color-999">性别：</text>
								<text class="color-232323">{{$list('sex')[item.sex]}}</text>
							</view>
							<text class="color-999  ">年龄：</text>
							<text class="color-232323">{{item.age}}</text>
						</view>
						<view class="fs26 mt20 pl46 flex">
							<view class="w50p">
								<text class="color-999">护龄：</text>
								<text class="color-232323">{{item.service_year}}年</text>
							</view>
							<text class="color-999">籍贯：</text>
							<text class="color-232323">{{item.native_place}}</text>
						</view>
					</block>
					<view class="fs26 mt20 pl46 " v-if="item.remarks">
						<text class="color-999">留言：</text>
						<text class="color-232323">
							<text>{{item.remarks}}</text>
						</text>
					</view>
					<view
						@click="$u.route('/pages/index/demo/pay',{order_sn:data.order_sn,receive_id:item.receive_id||item.id||''})"
						class="bg-zs color-fff h76 radius12 mx44 flex row-center mt40 ">
						雇佣她
					</view>
				</view>
				<view class="radius20 bg-fff pt44 pb50 text-center px70 mb20" v-if="!data.order_receive.length">
					<image src="/static/img/order/order2.png" class="w352 h260" mode=""></image>
					<view class="fs30 color-232323 mt28">
						请关注通知，若有师傅{{data.type_text}}将会在第一 时间通知您
					</view>
					<view class="fs28 color-999 mt24" v-if="data.type==0">您可以在{{data.type_text}}的师傅中挑选一个适合您的</view>
				</view>
			</block>
			<view class="radius20 bg-fff pt44 pb50 text-center mb20" v-else-if="data.status==0">
				<image src="/static/img/order/fk.png" class="w182 h210" mode=""></image>
				<view class="fs30 color-232323 mt50">您已下单成功，记得尽快付款哦~</view>
				<view class="fs28 color-999 mt20">付款后将会有陪诊师跟您联系，并预约服务时间</view>
			</view>

			<view class="mb20 radius20 bg-fff pt22 pb26 text-center">
				<image src="/static/img/order/2.png" class="h148" mode="" v-if="data.type==0"></image>
				<image src="/static/img/order/1.png" class="h148" mode="" v-else></image>
			</view>
		</view>
		<view v-if="tablist[current].id==1" class="pl20 pr20 pr">
			<view class="mb20 radius20 bg-fff pt20" v-if="data.receive_id">
				<view class="flex pr20">
					<view class="w6 h20 bg-zs radius4 "></view>
					<view class="fs30 color-232323 ml20 flex1">陪诊师</view>
					<view class="color-fs mr10" @click="$u.route('/pages/orderList/complaint',$params)">
						<u-icon name="error-circle" />
						<text class="color-fs ml10">投诉建议</text>
					</view>
				</view>
				<view class="p26 flex"
					@click="$u.route('/pages/index/attendantDeatils/attendantDeatils',{master_id:data.master_id})">
					<image :src="data.avatar" class="h92 w92 radius" mode="aspectFill"></image>
					<view class="pl24 flex flex1 color-999">
						<view class="fs28 color-333 fw-700 flex1">{{data.name}}</view>
						<view class="">陪诊师详情</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="mb20 radius20 bg-fff pt24 pb60" v-if="data.status==4">
				<view class="flex ">
					<view class="w6 h20 bg-zs radius4 "></view>
					<view class="fs30 color-232323 ml20">
						服务确认码
					</view>
				</view>
				<view class="fs50 fw-700 color-zs text-center mt40">{{data.verify_code}}</view>
			</view>
			<view class="radius20 p24 bg-fff mb20" v-for="(item9,index9) in infoList" :key="index9">
				<view class="fs30 mb12 tit-ac">
					<text>{{item9.title}}</text>
				</view>
				<block v-if="item.value" v-for="(item,index) in item9.list" :key="index">
					<view class="" v-if="item.type=='arr'">
						<block v-for="(item2,index2) in item.value" :key="index2">
							<view class="color-666 pt12">{{item.name+''+(index2+1)}}</view>
							<view v-if="item2[item3.fidle]" class="flex row-between flex-wrap pt12 pb12 ml10"
								v-for="(item3,index3) in item.list" :key="index3">
								<view class="color-666" v-if="item3.name">{{item3.name}}</view>
								<view class="" :class="item3.class">{{item2[item3.fidle]}}</view>
							</view>
						</block>
					</view>
					<view v-else class="flex row-between flex-wrap pt12 pb12">
						<view class="color-666" v-if="item.name">{{item.name}}</view>
						<block v-if="item.type=='img'">
							<!-- $tool.lookImg($paths(item.value),index2) -->
							<view class="ml10" v-for="(item2,index2) in $paths(item.value)" :key="index2"
								@click="lookImg(item.value,index2)">
								<image :src="item2" class="w200 h200" mode="aspectFit"></image>
							</view>
						</block>
						<view :class="item.class" v-else>{{item.value}}</view>
					</view>
				</block>
			</view>
		</view>
		<view class="m20 radius20 bg-fff py24 px20" v-if="data.status==5">
			<view class="color-fs fw-700 fs28">温馨提示：</view>
			<view class="color-666 fs26 lh15 mt20">若对服务满意，请确认验收，点击下方确认验收按钮，即代 表服务已完成。</view>
		</view>

		<view class="h120"></view>

		<view class="fixed bottom0 left0 w-max bg-fff flex ">
			<view class="flex1 p20" v-if="data.status<2">
				<u-button type="warning" ripple plain @click="cancelShow = true">取消订单</u-button>
			</view>
			<view class="flex1 p20" v-if="data.status==0&&data.service_type==0">
				<u-button type="warning" ripple @click="addPriceShow=!addPriceShow">加价</u-button>
			</view>
			<view class="flex1 p20" v-if="data.status==0&&data.type!=0">
				<u-button type="warning" ripple @click="$u.route('/pages/index/demo/pay',{order_sn:data.order_sn})">立即付款
				</u-button>
			</view>
			<view class="flex1 p20" v-if="data.status==2">
				<u-button type="warning" ripple @click="urgeOrder">催一催</u-button>
			</view>
			<view class="flex1 p20" v-if="data.status>=4&&data.is_insured==1&&data.apply_insured==0">
				<u-button type="warning" ripple @click="applyInsured">申请保价</u-button>
			</view>
			<view class="flex1 p20" v-if="data.status==5&&data.service_type==1&&data.pay_time==0">
				<u-button type="warning" ripple @click="$u.route('/pages/index/demo/pay',{order_sn:data.order_sn})">验收付款
				</u-button>
			</view>
			<view class="flex1 p20" v-else-if="data.status>=6&&data.service_type==1&&data.pay_time==0">
				<u-button type="warning" ripple @click="$u.route('/pages/index/demo/pay',{order_sn:data.order_sn})">去付款
				</u-button>
			</view>
			<view class="flex1 p20" v-else-if="data.status==5">
				<u-button type="warning" ripple @click="check">确认验收
				</u-button>
			</view>
			<view class="flex1 p20" v-if="data.status==6">
				<u-button type="warning" ripple @click="$u.route('/pages/orderList/evaluate',$params)">护工评价
				</u-button>
			</view>
			<view class="flex1 p20" v-if="data.status==3||data.status==7">
				<u-button type="warning" ripple @click="del">删除订单</u-button>
			</view>
		</view>

		<u-popup v-model="cancelShow" mode="center" border-radius="14" width="650">
			<view class="p40 bg-fff ">
				<view class=" fw-700 pb30  fs34">取消原因</view>
				<view @click="cancelForm.cancel_type=item.name" v-for="(item,index) in cancel_type_list" :key="index"
					class="flex row-between lh25">
					<view class="">{{item.name}}</view>
					<image class="h32 w32" mode=""
						:src="cancelForm.cancel_type==item.name?'/static/img/my/select.png':'/static/img/my/noselect.png'">
					</image>
				</view>
				<view class="h20"></view>
				<view class="p20 bg-f5f radius14">
					<textarea placeholder="请输入具体原因" class="w-max h150" v-model="cancelForm.reason"></textarea>
				</view>
				<view class="h40"></view>
				<u-button type="warning" ripple @click="cancelOrder">确定</u-button>
			</view>
		</u-popup>
		<u-popup v-model="addPriceShow" mode="center" border-radius="14" width="650">
			<view class="p60 bg-fff ">
				<view class="tc fs36 color-fs">
					<text>单次加价</text>
					<text class="">{{$config.add_price}}</text>
					<text>,是否加价？</text>
				</view>
				<view class="h60"></view>
				<view class="flex row-between">
					<view class="w240">
						<u-button type="warning" ripple plain @click="addPriceShow=!addPriceShow">取消</u-button>
					</view>
					<view class="w240">
						<u-button type="warning" ripple @click="addPrice">确定</u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addPriceShow: false,

				current: 0,
				seeMore: 0,


				cancelShow: false,
				cancel_type_list: [{
						name: '下错单了',
						id: 0,
					},
					{
						name: '不需要该服务了',
						id: 1
					},
					{
						name: '其他',
						id: 2
					},
				],
				cancelForm: {
					cancel_type: '下错单了', //0个人原因 1陪诊师原因
					reason: '', //具体原因
				},
				data: '',

				master: '',
				organ: '',

			};
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop
		},
		onLoad() {
			uni.$once('cancelOrder', e => {
				this.cancelShow = true
			})
		},
		onShow() {
			this.getData()
		},
		methods: {
			lookImg(value, index2) {
				this.$tool.lookImg($paths(value), index2)
			},
			getData() {
				this.$request('/member/order/orderInfo', this.$params).then(res => {
					let data = res.data
					data.type_text = this.$list('type')[data.type]
					this.data = res.data
				})
			},
			masterInfo(master_id) {
				this.$request('/member/search/masterInfo', {
					master_id
				}).then(res => {
					this.master = res.data
				})
			},
			organInfo(organ_id) {
				this.$request('/member/search/organInfo', {
					organ_id
				}).then(res => {
					this.organ = res.data
				})
			},
			cancelOrder() {
				let params = {
					...this.$params,
					...this.cancelForm,
				}
				this.$request('/member/order/cancelOrder', params).then(res => {
					this.$msg(res.msg)
					this.cancelShow = false
					this.getData()
				})
			},
			urgeOrder() {
				this.$showModal('催一催').then(res => {
					this.$request('/member/order/urgeOrder', this.$params).then(res => {
						this.$msg(res.msg)
						this.getData()
					})
				})
			},
			applyInsured() { //申请保价
				this.$showModal('申请保价').then(res => {
					this.$request('/member/order/applyInsured', this.$params).then(res => {
						this.$msg(res.msg)
						this.getData()
					})
				})
			},
			addPrice() { //加价
				this.$request('/member/index/addPrice', this.$params).then(res => {
					this.$msg(res.msg)
					this.addPriceShow = false
					this.getData()
				})
			},
			check() {
				this.$showModal('验收').then(res => {
					this.$request('/member/order/check', this.$params).then(res => {
						this.$msg(res.msg)
						this.getData()
					})
				})
			},

			del() {
				this.$showModal('删除订单').then(res => {
					this.$request('/member/order/delOrder', this.$params).then(res => {
						this.$msg(res.msg)
						setTimeout(this.$navBack, 1000)
					})
				})
			},
		},
		computed: {
			tablist() {
				let arr = []
				if (!this.data.receive_id) {
					arr.push({
						name: '陪诊师信息',
						id: 0
					})
				}
				arr.push({
					name: '订单信息',
					id: 1
				})
				return arr
			},
			infoList() {
				let data = this.data || ''
				let arr = [{
					title: '订单信息',
					list: [{
							name: '服务类型',
							value: data.service_name,
							class: 'color-zs'
						}, {
							name: '订单编号',
							value: data.order_sn,
						},
						{
							name: '订单金额',
							value: data.actual_price,
						},
						{
							name: '优惠金额',
							value: data.coupon_price * 1 && data.coupon_price,
							class: "color-fs"
						},
						{
							name: '保价服务费',
							value: data.insured_price * 1 && data.insured_price,
						},
						{
							name: '实付金额',
							value: data.pay_price,
							class: "color-fs"
						},
						{
							name: '下单时间',
							value: data.add_time,
						},
						{
							name: '雇佣时间',
							value: data.hire_time,
						},
						{
							name: '签到时间',
							value: data.signin_time,
						},
						{
							name: '服务开始时间',
							value: data.expect_time,
						},
						{
							name: '核销时间',
							value: data.verify_time,
						},
						{
							name: '验收时间',
							value: data.check_time,
						},
						{
							name: '服务内容',
							value: data.receive?.service_content || '',
						},
						{
							name: '服务照片',
							value: data.receive?.pics || '',
							type: 'img',
							nameClass:'w-max pb20'
						},
						{
							name: '药品照片',
							value: data.receive?.drugs_pic || '',
							type: 'img',
							nameClass:'w-max pb20'
						},
						{
							name: '发票照片',
							value: data.receive?.bill_pic || '',
							type: 'img',
							nameClass:'w-max pb20'
						},
						{
							name: '快递单号照片',
							value: data.receive?.express_pic || '',
							type: 'img',
							nameClass:'w-max pb20'
						},
					]
				}, {
					title: '预约信息',
					list: [{
							name: '期望开始时间',
							value: data.expect_time
						}, {
							name: '期望价格',
							value: data.expect_price
						},
						{
							name: '医院',
							value: data.hospital,
						},
						{
							name: '科室',
							value: data.department,
							class: 'color-zs'
						},
						{
							name: '预约人电话',
							value: data.mobile,
						},
						{
							name: '0普通号 1专家号',
							value: data.register_type, //
							// ==1?'是':data.register_type==0?'否':''
						},
						{
							name: '药品',
							value: data.drugs, //
							type: 'arr',
							list: [{
									name: '企业',
									fidle: 'drugs_factory'
								},
								{
									name: '药品名称',
									fidle: 'drugs_name'
								}, {
									name: '数量',
									fidle: 'drugs_num'
								}, {
									name: '规格',
									fidle: 'drugs_specs'
								}
							]
						},
						{
							name: '医生',
							value: data.doctor,
						},
						{
							name: '陪诊师性别',
							value: this.$list('sex')[data.master_sex],
						},
						{
							name: '报告类型',
							value: data.report_type,
						},
						{
							name: '是否保价',
							value: data.is_insured === 1 ? '是' : data.is_insured == 0 ? '否' : '',
						},
						{
							name: '是否需要发票',
							value: data.is_invoice === 1 ? '是' : data.is_invoice == 0 ? '否' : '',
						},
						{
							name: '登记号',
							value: data.register_no,
						},
						{
							name: '就诊二维码',
							value: data.qr_code,
							type: 'img'
						},
						{
							name: '报告单条形码',
							value: data.bar_code,
							type: 'img'
						},
						{
							name: '处方照片',
							value: data.prescription,
							type: 'img'
						},
						{
							name: '床号',
							value: data.bed_num,
						},
						{
							name: '自理能力',
							value: data.ability,
						},
						{
							name: '服务天数',
							value: data.days,
						},
						{
							name: '诊断结果',
							value: data.results,
						},
						{
							name: '服务需求',
							value: data.remarks,
						},
						{
							name: '',
							value: data.images,
							type: 'img'
						},
					]
				}, ]
				return arr
			}
		},
	}
</script>

<style lang="scss">

</style>
